<template>
  <div class="xtx-bread-item">
  <!--
      传to可以点击，不传不能点击
   -->
    <router-link v-if="to" :to="to"><slot></slot></router-link>
    <!-- 插槽，面包屑分类导航的名字 -->
    <span v-else> <slot></slot> </span>

    <!-- 默认分隔符小箭头 -->
    <i v-if="separator">{{ separator }}</i>
    <i v-else class="iconfont icon-angle-right"></i>
  </div>
</template>

<script>
import { inject } from 'vue'
export default {
  name: 'XtxBreadItem',
  props: {
    to: {
      type: String,
      default: ''
    }
  },
  setup () {
    const separator = inject('separator')

    return { separator }
  }
}
</script>
